.w10{
    width: 10rem;
}
.w15{
    width: 15rem;
}
.w20{
    width: 20rem;
}
.w25{
    width: 25rem;
}
.w30{
    width: 30rem;
}
.w40{
    width: 40rem;
}
.w50{
    width: 50rem;
}
.flex-row{
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-column{
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-row, .flex-column{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-between {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex-1 {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.flex-shrink-0 {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.flex-start-h {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.flex-start-v {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

/*font-size*/
.fz-12{
    font-size: 1.2rem;
}
.fz-13{
    font-size: 1.3rem;
}
.fz-14{
    font-size: 1.4rem;
}
.fz-15{
    font-size: 1.5rem;
}
.fz-16{
    font-size: 1.6rem;
}
.fz-18{
    font-size: 1.8rem;
}
.fz-20{
    font-size: 2rem;
}
.fz-22{
    font-size: 2.2rem;
}
.fz-24{
    font-size: 2.4rem;
}
.fz-26{
    font-size: 2.6rem;
}
.fz-28{
    font-size: 2.8rem;
}
.fz-30{
    font-size: 3rem;
}
.fz-32{
    font-size: 3.2rem;
}
.fz-40{
    font-size: 4rem;
}
.fz-50{
    font-size: 5rem;
}

.font-bold {
    font-weight: 700;
}

/*color*/
.color-main {
    color: #1DA16F;
}
.color-white {
    color: white;
}
.color-red {
    color: #ff0000;
}
.color-black{
    color: #000000;
}
.color-grey{
    color: #73817C;
}
.color-green{
    color: #00A854;
}
.color-blue{
    color: #399DFF;
}
.color-base {
    color: #313B37;
}
.color-33{
    color: #333333;
}
.color-66{
    color: #666666;
}
.color-99{
    color: #999;
}

/*background-color*/
.bg-white {
    background-color: white;
}

/** 基础通用 **/
.pt5 {
    padding-top: 0.5rem;
}

.pr5 {
    padding-right: 0.5rem;
}

.pb5 {
    padding-bottom: 0.5rem;
}

.mt5 {
    margin-top: 0.5rem;
}

.mr5 {
    margin-right: 0.5rem;
}

.mb5 {
    margin-bottom: 0.5rem;
}

.mb8 {
    margin-bottom: 0.5rem;
}

.ml5 {
    margin-left: 0.5rem;
}

.ml10 {
    margin-left: 1rem;
}

.ml15 {
    margin-left: 1.5rem;
}

.ml35 {
    margin-left: 3.5rem;
}

.mt10 {
    margin-top: 1rem;
}

.mt15 {
    margin-top: 1.5rem;
}

.mt30 {
    margin-top: 3rem;
}

.mt35 {
    margin-top: 3.5rem;
}

.mt40 {
    margin-top: 4rem;
}

.mt50 {
    margin-top: 5rem;
}

.mt60 {
    margin-top: 6rem;
}

.mr10 {
    margin-right: 1rem;
}

.mr15 {
    margin-right: 1.5rem;
}

.mb10 {
    margin-bottom: 1rem;
}

.mb15 {
    margin-bottom: 1.5rem;
}

.mt20 {
    margin-top: 2rem;
}

.mr20 {
    margin-right: 2rem;
}

.mb20 {
    margin-bottom: 2rem;
}

.m20 {
    margin-left: 2rem;
}

.text-center {
    text-align: center;
}

.el-dialog:not(.is-fullscreen) {
    margin-top: 6vh !important;
}

/** 表单布局 **/
.form-header {
    font-size: 1.5rem;
    color: #6379bb;
    border-bottom: 1px solid #ddd;
    margin: 0.8rem 1rem 2.5rem 1rem;
    padding-bottom: 0.5rem;
}

/** 表格布局 **/
.pagination-container {
    position: relative;
    height: 2.5rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 2rem !important;
}

/* tree border */
.tree-border {
    margin-top: 0.5rem;
    border: 0.1rem solid #e5e6e7;
    background: #FFFFFF none;
    -webkit-border-radius: 0.4rem;
    -moz-border-radius: 0.4rem;
    border-radius: 0.4rem;
}

.pagination-container .el-pagination {
    right: 0;
    position: absolute;
}

.el-table .fixed-width .el-button--mini {
    color: #409EFF;
    padding-left: 0;
    padding-right: 0;
    width: inherit;
}

.el-tree-node__content > .el-checkbox {
    margin-right: 0.8rem;
}

.list-group-striped > .list-group-item {
    border-left: 0;
    border-right: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.list-group {
    padding-left: 0;
    list-style: none;
}

.list-group-item {
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 1.1rem 0px;
    font-size: 1.3rem;
}

.pull-right {
    float: right !important;
}

.el-card__header {
    padding: 1.4rem 1.5rem 0.7rem;
    min-height: 4rem;
}

.el-card__body {
    padding: 1.5rem 2rem 2rem 2rem;
}

.card-box {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
    background: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
    background: #48D1CC;
    border-color: #48D1CC;
    color: #FFFFFF;
}

.el-button--cyan {
    background-color: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
}

/* text color */
.text-navy {
    color: #1ab394;
}

.text-primary {
    color: inherit;
}

.text-success {
    color: #1c84c6;
}

.text-info {
    color: #23c6c8;
}

.text-warning {
    color: #f8ac59;
}

.text-danger {
    color: #ed5565;
}

.text-muted {
    color: #888888;
}

/* image */
.img-circle {
    border-radius: 50%;
}

.img-lg {
    width: 12rem;
    height: 12rem;
}

.avatar-upload-preview {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(50%, -50%);
    -moz-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    -o-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    width: 18rem;
    height: 18rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 4px #ccc;
    -moz-box-shadow: 0 0 4px #ccc;
    -o-box-shadow: 0 0 4px #ccc;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
}

/* radio */
.radio-box{
    display: inline-block;
    position: relative;
    height: 2rem;
    line-height: 2rem;
    margin-right: 0.5rem;
}
.radio {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    cursor: pointer;
    background-color: #30C0FF;
    border: 1px solid #cccccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.input-radio {
    display: inline-block;
    position: absolute;
    opacity: 0;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    left: 0;
    outline: none;
    -webkit-appearance: none;
}
.on {

}

/* 拖拽列样式 */
.sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
}

.top-right-btn {
    position: relative;
    float: right;
}

.line-clamp1, .line-clamp2, .line-clamp3, .line-clamp4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
}
.line-clamp1 {
    -webkit-line-clamp: 1;
}
.line-clamp3 {
    -webkit-line-clamp: 3;
}
.line-clamp2 {
    -webkit-line-clamp: 2;
}
.line-clamp4 {
    -webkit-line-clamp: 4;
}

/*滚动条样式*/
.scrollbar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.scrollbar-h::-webkit-scrollbar {
    width : 1px;
    height: 5px;
}
.scrollbar::-webkit-scrollbar-thumb,
.scrollbar-h::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius   : 1rem;
    background-color: #999999;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
.scrollbar::-webkit-scrollbar-track,
.scrollbar-h::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
}

.home-warp {
    width: 100%;
    height: 100%;
    background-image: url("../assets/home/ic_home_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

/*header*/
.wrap-header {
    height: 12rem;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg,#ffffff, #eefff9);
    box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.10);
}
.wrap-header .wrap-header-title {
    width: 50rem;
    height: 5.6rem;
    margin: 0 5rem;
    background-image: url("../assets/home/ic_home_title.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.wrap-header .wrap-header-date-icon {
    width: 3rem;
    height: 3rem;
}
.wrap-header .wrap-header-date {
    color: #596661;
}
.wrap-header .wrap-header-right {
    width: 200px;
    height: 68px;
    background-image: url("../assets/common/ic_exit.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5rem;
}

/*center*/
.wrap-center {
    height: calc(100% - 22rem);
    width: 100%;
    padding: 0 5rem;
    box-sizing: border-box;
}
.wrap-center .handle-block {
    width: 37rem;
    height: 44.8rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem 2rem 0 rgba(54,125,98,0.10);
}
.wrap-center .handle-block .handle-block-icon {
    width: 25rem;
    height: 25rem;
}
.wrap-center .handle-block .handle-block-title{
    font-size: 5rem;
    font-weight: 700;
    color: #313b37;
    margin-top: 5rem;
}
.wrap-center .handle-block:last-child {
    margin-left: 20rem;
}

/*footer*/
.wrap-footer {
    height: 10rem;
    width: 100%;
    padding: 0 5rem;
    box-sizing: border-box;
    background: linear-gradient(180deg,#ffffff, #eefff9);
    box-shadow: 0px -1rem 1.5rem 0px rgba(0,0,0,0.05);
}
.wrap-footer .wrap-footer-title, .wrap-footer-num {
    color: #596661;
}
.wrap-footer .wrap-footer-icon {
    width: 3rem;
    height: 3rem;
}

.step-button-pre, .step-button-next {
    margin: 0 auto;
    display: inline-block;
    min-width: 14rem;
    height: 4.6rem;
    padding: 0 2rem;
    line-height: 4.6rem;
    border-radius: 1rem;
    text-align: center;
    cursor: pointer;
    color: white;
    font-size: 1.8rem;
    box-sizing: border-box;
}
.step-button-pre{
    background: #eafff7;
    color: #1DA16F;
    border: 0.3rem solid #1da16f;
    line-height: 4rem;
    margin-left: 2rem;
}
.step-button-next {
    background: linear-gradient(90deg,#51cf95, #0ba65a);
    margin-left: 2rem;
}
